<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品配置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写商品信息"></el-step>
      <el-step title="定价规则"></el-step>
    </el-steps>

    <!-- 卡片视图区域 -->
    <el-card v-show="!active">
      <div slot="header">
        <span>基本信息</span>
      </div>

      <!-- 商品信息表单 -->
      <CommodityBaseInfoAdd
        ref="commodityBaseInfoRef"
        @showCommodityBaseInfo="getCommodityBaseInfo"
      ></CommodityBaseInfoAdd>
    </el-card>

    <el-card v-show="!active">
      <div slot="header">
        <span>产品配置</span>
      </div>

      <!-- 产品配置表格组件 -->
      <ProductConfigure
        :productData="productTable"
        :goodsType="commodityForm.type"
        :typeCodes="commodityForm.product_type_codes"
        ref="productConfigureRef"
        @showProductConfig="getProductConfigData"
      ></ProductConfigure>
    </el-card>

    <el-row v-show="!active">
      <el-button @click="$router.push('/commodity/configureList')">
        取 消
      </el-button>
      <el-button class="theme-background-color" @click="nextStep"
        >下一步</el-button
      >
    </el-row>

    <el-card v-show="active">
      <div slot="header">
        <span>配置定价规则</span>
      </div>
      <PriceRuleAdd
        ref="priceRuleRef"
        @showPriceRuleRef="getPriceRuleRefData"
      ></PriceRuleAdd>
    </el-card>

    <el-row v-show="active">
      <el-button @click="active = 0">上一步</el-button>
      <el-button class="theme-background-color" @click="saveAllData">
        保存
      </el-button>
    </el-row>
  </div>
</template>

<script>
import CommodityBaseInfoAdd from './CommodityBaseInfoAdd.vue'
import ProductConfigure from './ProductConfigure.vue'
import PriceRuleAdd from './PriceRuleAdd.vue'

export default {
  components: { CommodityBaseInfoAdd, ProductConfigure, PriceRuleAdd },
  data() {
    return {
      active: 0,
      // 商品基本信息
      commodityForm: { type: '', product_type_codes: '' },
      // 产品配置
      productTable: [],
      // 定价规则
      priceRuleData: {}
    }
  },
  methods: {
    getCommodityBaseInfo(data) {
      this.commodityForm = JSON.parse(JSON.stringify(data))
    },
    getProductConfigData(data) {
      this.productTable = JSON.parse(JSON.stringify(data))
    },
    getPriceRuleRefData(data) {
      this.priceRuleData = JSON.parse(JSON.stringify(data))
    },
    nextStep() {
      // console.log(this.commodityForm)
      const flag = this.$refs.commodityBaseInfoRef.validateForm()
      if (!flag) return

      this.$refs.productConfigureRef.getFinalData()
      if (this.productTable.length === 0) {
        return this.$message.error('请配置产品')
      }
      console.log(this.commodityForm)
      // console.log(this.productTable)
      this.active = 1
    },
    async saveAllData() {
      const flag = this.$refs.priceRuleRef.validateForm()
      if (!flag) return

      this.$refs.priceRuleRef.getFinalData()
      if (this.priceRuleData.is_diff && this.priceRuleData.diff.length === 0) {
        return this.$message.error('请配置差异价规则')
      }
      // console.log(this.priceRuleData)

      const postData = Object.assign(
        this.commodityForm,
        { product: this.productTable },
        { rule: this.priceRuleData }
      )
      // console.log(postData)
      // 向后端发起请求
      const { data: res } = await this.$http.post('/admin/goods/add', postData)

      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success('新增商品成功')
      this.active = 2
      this.$router.push('/commodity/configureList')
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 10px;
}
/deep/.noBorder .el-input__inner {
  border: none;
}
</style>
